<template>
  <!-- 图表容器 -->
  <div class="topLocation">球员信息管理 / 球员图表</div>
  <div id="main" style="width: 1000px; height: 800px; margin: 10px auto;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';

const sourceData = ref([]); // 定义接收后端数据的响应式变量

// 在组件挂载后执行回调函数
onMounted(() => {
  axios.get('http://localhost:8080/player/countPlayersByPosition')
      .then(res => {
        sourceData.value = res.data; // 获取后端传过来的数据
        renderChart(); // 显示图表
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
});

const renderChart = () => {
  // 初始化 echarts 实例，并指定图表容器
  const myChart = echarts.init(document.getElementById('main'));

  // 转换数据为适合饼图的格式
  const pieData = sourceData.value.map(item => ({
    value: item['人数'],
    name: item['司职位置']
  }));

  const option = {
    title: {
      text: '球员司职分布',
      left: 'center',
      top: '20px',
      textStyle: {
        fontSize: 24, // 调整标题字体大小
        fontWeight: 'bold' // 加粗标题
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: '250px', // 调整图例位置
      data: sourceData.value.map(item => item['司职位置'])
    },
    series: [
      {
        name: '司职分布',
        type: 'pie',
        radius: '50%', // 调整饼图半径
        center: ['50%', '40%'], // 调整饼图位置
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  myChart.setOption(option); // 使用刚指定的配置项和数据显示图表。
};
</script>

<style>
.topLocation {
  font-size: 16px;
  font-weight: bold;
  color: #000; /* 文字颜色为黑色 */
  padding: 10px;
  border-bottom: 2px solid #000; /* 底部边框，黑色 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-start; /* 左对齐 */
  margin-bottom: 20px; /* 增加距离 */
  margin-top: 40px;
}
</style>
